<!-- 图层树 -->
<template>
  <div class="tree-layer">
    <div class="zz-dialog-title layer-tree-title" v-show="show">
      <span>图层管理</span>
      <div class="tree-ctrl" @click="show = !show" title="关闭">&lt;</div>
    </div>
    <div class="tree-show" v-show="show == false" @click="show = !show" title="展开图层面板">></div>
    <el-tree class="tree-content" ref="treeRef" :render-after-expand="false" v-show="show" :data="treedata" show-checkbox
      @check-change="handleCheckChange" node-key="id">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <img src="../assets/location.svg" title="定位" class="img-btn" @click="centerAt(data)"
            v-if="data.type != 'group' && data.visible">
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script>

export default {
  data() {
    return {
      show: true,
      treedata: [],
      viewer: undefined
    }
  },
  beforeMount(){
    this.viewer = this.$store.state.viewer
  },
  methods: {
    /**
     * @description: 图层刷新函数：用于获取图层树信息
     */
    async refesh() {
      let checked = [];
      if (this.viewer) {
        this.treedata.length = 0;
        let dataTemp = [];
        let layers = this.viewer.zz.config.operationallayers;
        let objLayer = Object.assign({}, layers);
        for (let ind in objLayer) {
          let item = objLayer[ind];
          dataTemp.push({ label: item.name, id: item.id, parentId: item.parentId, type: item.type, visible: item.visible });
          if (item.visible && item.type != 'group') {
            checked.push(item.id);
          }
        }
        dataTemp = this.transTree(dataTemp);
        this.fillData(dataTemp, this.treedata);
        await this.$nextTick()
        this.$refs.treeRef.setCheckedKeys(checked);
      }
    },
    /**
     * @description: 树转换函数：用于将原始图层数组转换为树格式数据
     * @param {Array} treeArray
     * @return {Array}
     */
    transTree(treeArray) {
      let map = new Map();
      for (let i = 0; i < treeArray.length; ++i) {
        let item = treeArray[i];
        map.set(item.id, item);
      }
      let ret = [];
      for (let i = 0; i < treeArray.length; ++i) {
        let item = treeArray[i];
        let pid = item.parentId;
        if (pid && map.has(pid)) {
          let pItem = map.get(pid);
          pItem.children = pItem.children || [];
          pItem.children.push(item);
        }
        else {
          ret.push(item);
        }
      }
      return ret;
    },
    /**
     * @description: 树填充函数：用于进一步完善图层树结构数据
     * @param {Array} dateTemp
     * @param {Array} dataRet
     */
    fillData(dateTemp, dataRet) {
      for (let i = 0; i < dateTemp.length; ++i) {
        let item = dateTemp[i];
        if (item.children) {
          dataRet.push({ label: item.label, id: item.id, visible: item.visible, type: item.type })
          dataRet[dataRet.length - 1].children = [];
          this.fillData(item.children, dataRet[dataRet.length - 1].children);
        } else {
          dataRet.push({ label: item.label, id: item.id, visible: item.visible, type: item.type })
        }
      }
    },
    /**
     * @description: 树节点勾选状态改变函数
     * @param {Array} node
     * @param {Booleam} checked
     */
    handleCheckChange(node, checked) {
      // let viewer = this.$store.state.viewer
      if (node.type != "group") {
        this.viewer.zz.setLayerVisible(node.id, checked);
        console.log('viewer.zz: ', this.viewer.zz);
        node.visible = checked;
      }
    },
    /**
     * @description: 地图中心跳转函数
     * @param {Object} data
     * @return {*}
     */
    centerAt(data) {
      // let viewer = this.$store.state.viewer
      if (!this.viewer || !this.viewer.zz) {
        return;
      }
      this.viewer.zz.centerAtLayer(data.id);
    }
  },
  mounted() {
    this.refesh()
    this.$EventBus.$on('sceneLoaded',()=>{
      this.refesh()
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('sceneLoaded')
  }

}

</script>

<style>
.tree-layer {
  position: absolute;
  top: 45px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(32, 160, 255, 0.6);
  color: white;
}

.tree-ctrl {
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: default;
  width: 30px;
  height: 36px;
  text-align: center;
}

.tree-ctrl:hover {
  color: red;
  cursor: default;
}

.tree-content {
  min-width: 150px;
  max-height: 800px;
  overflow: auto;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
}

.tree-show {
  width: 26px;
  height: 28px;
  text-align: center;
  line-height: 24px;
}

.layer-tree-title {
  background-color: rgba(0, 0, 0, 0.5);
  height: 36px;
  line-height: 36px;
  padding-left: 8px;
  font-size: 14px;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, #2e678f 0, #0cf 49%, rgba(22, 54, 103, 0) 100%) 1 1;
}

.img-btn {
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.el-tree {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: white !important;
  font-size: 14px !important;
}

.el-tree-node__content {
  height: unset;
}

.el-tree-node__content:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.el-tree-node:focus>.el-tree-node__content {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.tree-show:hover {
  color: red;
  cursor: default;
}

.custom-tree-node {
  margin-right: 6px;
}
</style>
 